Hey @mjbvz, can I get a review on this PR? Thanks!

Hey @mjbvz , thanks for getting back to me! I just slightly confused and want to clarify a few things:

• Do we still want to keep the toggle button or is the pan/zoom now controlled by this vscode configuration?
• So when you mention show pan/zoom controls on hover, do you mean the toggle button

or these controls after pan/zoom is enabled

• When you say right click and turn off pan/zoom, does that also turn off pan/zoom entirely like the VS Configuration.
• Can you give me a bit more details or steps taken to get to this "diagram get cut off" behaviour? I mostly just rely on svg-pan-zoom library to do the pan/zoom and have some extra logic to store the state of pan/zoom.

Sure, following up:

• The toggle feels too prominent to show on every single diagram. Let's start with using the configuration plus maybe command /right click for quick toggling just for the current preview

• For the controls, I mean the +/-. I only care about these if I'm interacting with the diagram. Again it feels cluttered to show them all the time

• Let's try to match how word wrap works in editors works. With word wrap, the setting provides the default value but you can then override this per editor using the command. The command however only applies to the current document, it does not change the configuration

• Try creating various sized diagram and then zooming in / panning. You can also try making the markdown preview itself larger or smaller. I was fairly easily able to get the diagram to be cut off horizontally when doing this

Hey @mjbvz, sorry haven't been able to work on it much been kinda busy with other stuff.

I've made a few changes according to some of your comments

Toggle and Controls being too prominent

• Added a vscode config field "enablePanZoom" which by default is true but when set to false will not render with any pan zoom functionality
• Both toggle and controls will only appear when hovered on so they aren't there all the time
• Given the above two changes, I didn't work on adding any commands or right click functionality, feels like the code would get a bit more messier and need to refactor a tad bit.

Color theme issues

• For the toggle I've changed the styling to use vscode color variables, not sure if they're the exact correct ones. I just picked a background that is darker than the preview background then just a foreground and active color.
• For the Controls that one is a bit more tricky, so that is created by svg-pan-zoom and a bit difficult to edit the styling. The way to get around it is to disable their controls and we create our own custom one, which is a bit more work. Not sure if we can put it as an uplift item later on.

Diagram being cut off

So for this issue I'm assuming you were talking about the diagram not taking the full width of the page when pan zoom is enabled. The reason for this was because I wanted the switching between pan zoom to look seamless, so when it gets turned on it takes the current size dimension of the diagram. But given it doesn't use the full width of the page would look like it's cut off.

I've updated so that it does take the full width of the page when pan zoom is enabled, but the height is still the height of the current diagram so when you resize the width down it does look a bit skinny and tall which is something that we have to accept I think because the diagram needs a set height when pan zoom is enabled.